# 导入gradio
import gradio as gr

my_list = []    # 存放账号密码的列表
accounts = {"account": "", "password": ""}  # 存储账号密码信息
# 字典 dict 符号：{"键": "值"}
# 列表 list 符号：[元素1，元素2]
# 元组 tuple 符号: (元素1，元素2)
# 集合 set   符号:{元素1，元素2}

def register(account, password):
    """
    注册账号的函数
    :param account:账号
    :param password:密码
    :return:返回注册成功的信息
    """
    accounts["account"] = account   # 把传入的账号赋值给字典的account字段
    accounts["password"] = password # 把传入的密码赋值给字典的password字段
    my_list.append(accounts)    # 把账号密码字典加到列表中
    print(f"注册{account}成功")     # 打印注册成功的信息
    return f"注册{account}成功"     # 返回注册成功的信息

# 定义一个登录函数
def login(account, password):
    # TODO 以后补充逻辑
    print("登录成功")
    return "登陆成功"

# # 以前的写法
# demo = gr.Blocks()
# # 在实例化时，同时进行其他操作，可以使用with语句。
# with gr.Blocks() as demo:
#     # 在这里可以添加更多的操作
#     pass

# 创建Blocks实例
with gr.Blocks() as demo:   # 类的实例化：类名()
    # 页面的布局
    gr.Markdown("# 这是我的练习项目")
    gr.Markdown("## 二级标题")
    with gr.Row():  # 行布局
        account_text = gr.Textbox(placeholder="账号：", label="账号：")
        password_text = gr.Textbox(placeholder="密码：", label="密码：")
    with gr.Column():   # 列布局
        login_btn = gr.Button("登录", variant="primary")
        register_btn = gr.Button("注册")
        message_box = gr.Textbox(label="输出信息")


    register_btn.click(     # 当注册按键被点击时
        fn=register,    # fn参数 接收函数名称，代表要执行的函数
        inputs=[account_text, password_text],    # inputs参数 接收gr的组件
        outputs=message_box     # outputs参数 接收gr的组件
    )
    login_btn.click(
        fn=login,
        inputs=[account_text, password_text],
        outputs=message_box
    )



demo.launch()